<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="relative rounded-xl overflow-auto p-8">
        <div class="relative rounded-lg text-center overflow-hidden w-56 mx-auto bg-gray-300">
            <div class="absolute inset-0 opacity-50 bg-stripes-gray"></div>
            <img class="object-contain relative z-10  h-48 w-full"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80">
        </div>
    </div>
    <div class="relative rounded-xl overflow-auto p-8">
        <div class="bg-stripes-sky-blue rounded-lg text-center overflow-hidden w-56 sm:w-96 mx-auto bg-gray-300">
            <img class="object-fill h-48 w-full"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80">
        </div>
    </div>
    <div class="relative rounded-xl overflow-auto p-8">
        <div class="relative rounded-lg text-center overflow-hidden w-56 sm:w-96 mx-auto bg-gray-300">
            <div class="absolute inset-0 opacity-50 bg-stripes-gray"></div>
            <img class="object-scale-down relative z-10 h-48 w-full"
                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=160&amp;q=80">
        </div>
    </div>
    <div class="flex  ">
        <div class="bg-blue-500 p-4  ml-auto">
            这个块级元素会向左对齐
        </div>
        <div class="bg-green-500 p-4  ">
            另一个块级元素
        </div>
    </div>

    <div class="relative rounded-xl overflow-none">
        <div class="w-full">
            <div
                class="overflow-x-none overflow-y-none snap-x scroll-p-4 flex sm:grid sm:grid-cols-3 sm:gap-16 p-8 items-end pt-16">
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-left-top</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-left-top ring-1
                         ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute top-0 left-0 rounded-md 
                        overflow-hidden w-32 h-32 opacity-0 
                        sm:group-hover:opacity-25 max-w-none" src="./img/col-1.png">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-top</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-top ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute top-0 -left-6 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="./img/col-2.png">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-right-top</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-right-top ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute top-0 right-0 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-left</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-left ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute -top-6 left-0 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-center</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-center ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute -top-6 -left-6 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-right</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-right ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute -top-6 right-0 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-left-bottom</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-left-bottom ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute -top-12 left-0 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-40 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-bottom</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-bottom ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute -top-12 -left-6 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
                <div class="relative snap-always snap-start w-56 -mx-8 shrink-0 sm:w-auto">
                    <p
                        class="absolute top-0 inset-x-0 -translate-y-8 font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">
                        object-right-bottom</p>
                    <div class="group relative mx-auto w-20 h-20 rounded-lg">
                        <div class="relative z-10 w-full h-full rounded-md bg-right-bottom ring-1 ring-black/10 ring-inset shadow-lg"
                            style="background-image:url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=128&amp;h=128&amp;q=80)">
                        </div>
                        <img class="absolute -top-12 right-0 rounded-md overflow-hidden w-32 h-32 opacity-0 sm:group-hover:opacity-25 max-w-none"
                            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=256&amp;h=256&amp;q=80">
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>